<template>
	<view class="door-forbidden-manage">
		<view class="top-fixed">
			<view class="group-tab">
				<view class="tab-item" :class="{active:currentTag==0}" @tap="tabChange(0)">全部客人</view>
				<view class="tab-item" :class="{active:currentTag==1}" @tap="tabChange(1)">黑名单</view>
			</view>
			
			<view class="date-choose-box" v-if="currentTag==0">
				<image src="@/static/index/calendar.png" mode="widthFix" class="calendar-icon"></image>
				<picker mode="date" :data-index='0' :value="starTime" @change="bindDateChange" :end="currentDate">
					<view class="select-input" v-if="starTime">{{starTime}}</view>
					<view class="select-input" v-else>请选择开始时间</view>
				</picker>
				~
				<picker mode="date" :data-index='1' :value="date" @change="bindDateChange" :start="starTime" :end="currentDate">
					<view class="select-input" v-if="endTime">{{endTime}}</view>
					<view class="select-input" v-else>请选择结束时间</view>
				</picker>
			</view>
		</view>
		
		<view class="guest-list flexWrapNo">
			<view class="guest-item flexWarpColumn" v-for="(item,index) in listData" :key="index">
				<view class="img-box">
					<image :src="item.imageUrl" mode="aspectFill"></image>
					<!-- <image src="http://mms1.baidu.com/it/u=2478847266,4290423220&fm=253&app=120&f=JPEG?w=892&h=500" mode="aspectFill"></image> -->
				</view>
				<view class="time" v-if="currentTag==0">{{item.shootTime}}</view>
				<view class="operate" @tap="handleBlacklist(item)">{{currentTag==0?'加入黑名单':'移出黑名单'}}</view>
			</view>
		</view>
		<view class="empty-box" v-if="showEmpty">		
			<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
		</view>
		<uni-load-more v-if="showLoadStatus" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	// 防抖函数
	function debounce(fn, wait) {
	    let timeout = null;
	    return function() {
	        let context = this;
	        let args = arguments;
	        if (timeout) clearTimeout(timeout);
	        let callNow = !timeout;
	        timeout = setTimeout(() => {
	            timeout = null;
	        }, wait);
	        if (callNow) fn.apply(context, args);
	    };
	}
	export default{
		data(){
			const currentDate = this.getDate(0)
			const starDate = this.getDate(15)
			const endDate=this.getDate(0)
			return{
				currentTag:0,
				starTime: starDate,
				endTime: endDate,
				currentDate: currentDate,
				
				listData:[],
				pageNum: 1,
				pageSize:10,
				showEmpty:false,
				showLoadStatus: true,
				status:'loading',
				more:true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				
			}
		},
		onLoad() {
			this.freshList()
		},
		
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		
		methods:{
			tabChange(val){
				this.currentTag=val
				this.freshList()
			},
			
			// 刷新列表
			freshList(){
				this.pageNum = 1
				this.more = true
				this.showEmpty=false
				this.showLoadStatus=true
				this.status = 'loading'
				this.listData = []
				this.getList();
			},
			
			// 获取数据
			getList(){
				let params={
					pageNum:this.pageNum++,
					pageSize:this.pageSize,
					storeId: uni.getStorageSync('store_id'),
					type:this.currentTag,
				}
				if(this.starTime&&this.currentTag==0){
					params.startTime=this.starTime+' 00:00:00'
				}
				if(this.endTime&&this.currentTag==0){
					params.endTime=this.endTime+' 23:59:59'
				}
				this.$request.post(this.$api.accessControlList, params,{
					isJava:true,
				}).then(res => {
					let {
						data = {}
					} = res;
					if(res.code==200){
						let newArray = data.list
						let pages=data.pages
						
						if (newArray.length == 0 && this.pageNum>pages) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						}else{
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.pageSize) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.listData=this.listData.concat(newArray)
					}
				})
			},
			
			// 移入/移出黑名单
			handleBlacklist(item){
				let type=this.currentTag==0?1:0
				this.$request.post(this.$api.accessBlackList, {
					recordId:item.recordId,
					type:type,
					userId:uni.getStorageSync('user_id') 
				},{
					isJava:true,
				}).then(res => {
					let {
						data = {}
					} = res;
					console.log(data)
					if(res.code==200){
						this.$tools.showToast(res.message)
						if(this.currentTag==1){
							// 重新获取数据（在黑名单tab的时候才重新获取；全部tab的数据是所有的，包括黑名单）
							this.freshList()
						}
					}
				})
			},
			
			// 获取时间（n：几天前的时间，0为当天）
			getDate(n) {
				const date = new Date();
				date.setDate(date.getDate() - n);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			// 选择时间
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.starTime = e.target.value
				} else {
					this.endTime = e.target.value
				}
				this.freshList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.door-forbidden-manage{
		padding-bottom: 60rpx;
		.top-fixed{
			position: sticky;
			top: 0;
			z-index: 999;
			background: #040336;
			overflow: hidden;
			.group-tab{
				padding: 30rpx 40rpx 0 58rpx;
				display: flex;
				gap: 100rpx;
				justify-content: center;
				margin-bottom: 30rpx;
				.tab-item{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: rgba(255,255,255,0.7);
					line-height: 38rpx;
				}
				.active{
					color: #FFFFFF;
					&::after{
						content: "";
						display: block;
						width: 100%;
						height: 4rpx;
						background: #26BCFD;
						margin-top: 14rpx;
					}
				}
			}
			
			.date-choose-box{
				margin-bottom: 30rpx;
				padding: 0 60rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				gap:20rpx;
				.calendar-icon{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.guest-list{
			padding: 0 40rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 40rpx;
			.guest-item{
				width: 270rpx;
				align-items: center;
				.img-box{
					width: 264rpx;
					height: 312rpx;
					background: rgba(255,255,255,0.7);
					margin-bottom: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.time{
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.operate{
					margin-top: 10rpx;
					padding: 4rpx 8rpx;
					color: #333;
					background: #fff;
					font-size: 26rpx;
					border-radius: 8rpx;
				}
			}
			
		}
	}
</style>